<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="format-detection" content="telephone=no">
    <title>${goodsDetail.title }</title>
    <script src="static/js/cssrem.js"></script>
    <link href="static/css/style.css" rel="stylesheet">
</head>

<body>
<div class="content ovh">
    <div class="goods-main mod-goods">
        <div class="wrapper">
            <!-- Banner -->
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <c:forEach items="${img}" var="imgs">
                            <div class="swiper-slide photo100">
                                <img src="${imgs}" alt="">
                            </div>
                        </c:forEach>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- 商品信息 -->
            <dl class="goods-info bgwh">
                <dt class="pl20 cell">
                    <div class="cell-bd mr20 pr20">
                        <p class="f26 g6">(第${goodsDetail.time }期)</p>
                        <p class="f34 pt10 js-title ">${goodsDetail.title }</p>
                    </div>
                    <div class="cell-fd">
              <span class="cell-fd price">
                <em class="f30 b pr5">￥</em>
                <em class="js-price">${goodsDetail.price }</em>
              </span>
                    </div>
                </dt>
                <dd class="reward">
                    <dl class="item">
                        <dt class="f26 g9">
                            <span class="icon-reward--01 dib vm mr10"></span>
                            <span class="dib vm">预计产量:</span>
                        </dt>
                        <dd>${goodsDetail.expectHarvest }${goodsDetail.harvestUnitDesc }</dd>
                    </dl>
                    <dl class="item">
                        <dt class="f26 g9">
                            <span class="icon-reward--02 dib vm mr10"></span>
                            <span class="dib vm">认养周期:</span>
                        </dt>
                        <dd>${goodsDetail.equityCycle }个月</dd>
                    </dl>
                </dd>
            </dl>
            <!-- 选购 -->
            <dl class="income-rules goods-stock">
                <dt>产品库存信息：</dt>
                <dd class="income-rules-depict">
                    <div class="stage tc f0">
                        <h4 class="f30">${goodsDetail.stockNum }${goodsDetail.unitDesc }</h4>
                        <span class="g9 f22">剩余数量</span>
                    </div>
                    <div class="schedule">
                        <div class="dib rel">
                            <div class="column">
                                <div class="current"
                                     style="width:${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></div>
                            </div>
                            <div class="place"
                                 style="left:${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></div>
                            <div class="start f22 g9">0株</div>
                            <div class="total g9 f0">
                                <p class="f22">${goodsDetail.saleNum }${goodsDetail.unitDesc }</p>
                                <p class="f20">(已售)</p>
                            </div>
                        </div>
                    </div>
                </dd>
            </dl>
            <div class="mod-buy bgwh">
                <div class="cell">
                    <div class="cell-hd g6 f26 pl0">购买数量</div>
                    <div class="cell-bd">
                        <div class="mod-number g3">
                            <span class="btn-number number-decrease ion-ios-minus-empty f40"></span>
                            <input type="hidden" id="submitToken" value="${submitToken }">
                            <input class="number-input tc number-form" type="tel" min="${goodsDetail.minShopNum }"
                                   max="${goodsDetail.maxShopNum }" value="${goodsDetail.minShopNum }">
                            <span class="btn-number number-increase ion-ios-plus-empty f40"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 收益规则 -->
            <dl class="income-rules">
                <dt>产品收益规则：</dt>
                <dd class="income-rules-depict">
                    <div class="stage tc f0">
                        <h4 class="f30">${goodsDetail.stage }个阶段</h4>
                        <span class="g9 f22">收益时段</span>
                    </div>
                    <div class="stage-next">
                        <span class="icon-countdown dib vm"></span>
                        <span class="f0 dib vm">
                <span class="g6 f26">距离下一阶段：</span>
                <em class="g3 f28">约${goodsDetail.day }天</em>
              </span>
                    </div>
                </dd>
                <dd class="schedule">
                    <c:forEach items="${gsth}" var="gsth" varStatus="status">
                        <div class="schedule-item past tc <c:if test="${gsth.state eq '00' }">active</c:if>">
                            <div class="point">
                                <span class="dib">${status.index } </span>
                            </div>
                            <p class="f24">${gsth.expectHarvestTime }</p>
                            <p class="f22">约${gsth.expectHarvest }${goodsDetail.harvestUnitDesc }</p>
                        </div>
                    </c:forEach>
                </dd>
            </dl>
            <!-- 种植信息 -->
            <div class="planting-info mt20 bgwh">
                <h5 class="n f0">
                    <span class="dib vm f26 ml10 mr10">种植信息</span>
                </h5>
                <div class="planting-info-box">
                    <ul class="planting-info-list">
                        <li class="planting-info-item">
                            <div class="name">种植日期：</div>
                            <div class="value">${goodsDetail.birthday }</div>
                        </li>
                        <li class="planting-info-item">
                            <div class="name">植株年龄：</div>
                            <div class="value">${goodsDetail.treeAge }年</div>
                        </li>
                        <li class="planting-info-item">
                            <div class="name">到期时间：</div>
                            <div class="value">${goodsDetail.endUseTime }</div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- tips -->
            <div class="tips-more js-tips tc">
                <span class="js-icon dib vm ion-chevron-down ion-chevron-up g9"></span>
                <span class="tips-more__text g0 f24 dib vm">上拉查看图文详情</span>
            </div>
        </div>
    </div>
    <!--  详情  -->
    <div class="detail-main mod-detail bgwh">
        <div class="wrapper photo100">
            ${goodsDetail.content }
        </div>
    </div>
    <div class="column-buy">
        <div class="cell">
            <div class="cell-hd"></div>
            <div class="cell-bd tl">
        <span class="f28 money pr20">
          <em class="f26 g3">结算：</em>￥
          <em class="js-money"></em>
        </span>
            </div>
            <div class="cell-fd">
                <a class="btn-buy f30 white js-buy"
                   href="<%=basePath%>wap/pay/submitOrder?goodsSpecTimeId=${goodsDetail.id}">立即认养</a>
            </div>
        </div>
    </div>
    <link href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll-lite.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
    <script src="static/js/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="static/js/app.js"></script>
    <script type="text/javascript" src="static/js/detail.js"></script>
    <script>
        var btn = document.querySelector('.js-buy')
        var money = document.querySelector('.js-money')
        var number = document.querySelector('.number-form')
        var submitToken = document.querySelector('#submitToken')
        var url = btn.href
        btn.addEventListener('click', function (e) {
            e.preventDefault()
            location.href = url + '&num=' + number.value + '&totalPrice=' + money.innerHTML + '&submitToken=' + submitToken.value;
        })
    </script>
</body>

</html>